<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Element UI CSS -->
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!--本地CSS-->
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/element.css">
    <title>发布会议</title>
</head>
<body>
<div id="app">
    <el-container>

        <el-header>
            <el-menu mode="horizontal" router>
                <el-menu-item index="/">
                    <strong class="text-primary">协同会议平台</strong>
                </el-menu-item>
                <el-menu-item style="float: right;" @click="logout">退出</el-menu-item>
            </el-menu>
        </el-header>

        <el-container style="height: 700px">
            <el-aside width="200px">

                <el-row class="sidebar-header" type="flex" align="middle">
                    <div class="demo-image__preview">
                        <a href="user_look.html">
                            <el-avatar style="width: 60px; height: 60px" src="img/avatar-6.jpg"></el-avatar>
                        </a>
                    </div>
                    <div>
                        <span style="margin-left:10px;font-size: 12px;font-weight: bold">小灰</span><br>
                        <span style="margin-left:10px;font-size: 12px;font-weight: bold">研发部</span>
                    </div>
                </el-row>



                <el-menu :default-openeds="['1', '2','3']" default-active="3-2">
                    <a href="home.html">
                        <el-menu-item index="1">
                            <i class="el-icon-house"></i>
                            <span slot="title">主页</span>
                        </el-menu-item>
                    </a>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-user"></i>
                            <span>用户列表</span>
                        </template>
                        <el-menu-item-group>
                            <a href="user.html"><el-menu-item index="2-1">查看用户</el-menu-item></a>
                            <a href="my_user.html"><el-menu-item index="2-2">我关注的用户</el-menu-item></a>
                            <a href="article.html"><el-menu-item index="2-3">发布文章</el-menu-item></a>
                            <a href="article_collect.html"><el-menu-item index="2-4">我的收藏</el-menu-item></a>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-office-building"></i>
                            <span>部门列表</span>
                        </template>
                        <el-menu-item-group>
                            <a href="department.html"><el-menu-item index="3-1">全部部门</el-menu-item></a>
                            <a href="meeting.html"><el-menu-item index="3-2">会议系统</el-menu-item></a>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-main>
                <h2>发布会议</h2>
                <el-form ref="meetingForm" :model="meetingForm" label-width="80px">
                    <el-form-item label="标题">
                        <el-input v-model="meetingForm.title" placeholder="会议标题"></el-input>
                    </el-form-item>
                    <el-form-item label="部门">
                        <el-select v-model="meetingForm.department" placeholder="请选择部门">
                            <el-option v-for="dept in departments" :key="dept.value" :label="dept.label"
                                       :value="dept.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="抄送人">
                        <el-select v-model="meetingForm.ccUsers" multiple filterable placeholder="请选择抄送人">
                            <el-option v-for="person in ccPeople" :key="person.value" :label="person.label"
                                       :value="person.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开始时间">
                        <el-date-picker v-model="meetingForm.startTime" type="datetime"
                                        placeholder="选择日期时间"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker v-model="meetingForm.endTime" type="datetime"
                                        placeholder="选择日期时间"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="会议内容">
                        <el-input type="textarea" v-model="meetingForm.content" :rows="5"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-row type="flex" justify="center">
                            <el-button type="primary" @click="onSubmit">发布</el-button>
                            <el-button @click="resetForm('meetingForm')">清空</el-button>
                        </el-row>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>

        <!-- Footer -->
        <el-row type="flex" justify="center">
            <p>&copy; 2025.Company <a href="#">协同会议平台</a></p>
        </el-row>
    </el-container>
</div>

<!-- Vue and Element UI JS -->
<script src="js/vue.min.js"></script>
<script src="js/element.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                meetingForm: {
                    title: '',
                    department: '',
                    ccUsers: [],
                    startTime: '',
                    endTime: '',
                    content: ''
                },
                departments: [
                    {value: '研发部', label: '研发部'},
                    {value: '销售部', label: '销售部'},
                    {value: '行政部', label: '行政部'},
                    {value: '财务部', label: '财务部'},
                    {value: '总裁办公室', label: '总裁办公室'}
                ],
                ccPeople: [
                    {value: '小灰', label: '小灰'},
                    {value: '小蓝', label: '小蓝'},
                    {value: '小红', label: '小红'},
                    {value: '小紫', label: '小紫'}
                ]
            };
        },
        methods: {
            logout() {
                // Implement logout functionality here
                window.location.href = "index.html";
            },
            onSubmit() {
                // Implement submit functionality here
                window.location.href = "meeting_add.html";
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    });
</script>
</body>
</html>